<template>
   <!--       <div class="topnav">
    <a href="#" >晨岛</a>
    <a href="#" >雨林</a>
    <a href="#">霞谷</a>
    <a href="#">秋分</a>
    <a href="#">夏日</a>
   <input v-model="message" placeholder="搜索" type="text"/>
    

  </div>-->
    <div class="topnav">
        <!--在循环里面加一个点击事件，点击事件触发handleSelect方法，参数为当前菜单的path-->
    <div class="a" v-for="(item ,index) in itemList" :index="item.path" :key="index" @click="handleSelect(item.path)">
        <span slot="title">{{item.title}}</span>
        

    </div>
    <div class="b">
        <input v-model="message" placeholder="搜索" type="text"/>
    </div>
    <router-view></router-view>
</div>


</template>

<script >
import { ref, computed,reactive } from "vue";
 import {  useRouter } from "vue-router";
 //useRoute 主要用于获取当前路由的信息，适用于静态展示当前路由信息的场景。
 //useRouter 主要用于路由跳转，适用于动态跳转的场景。
 export default {
    setup() {
        const message = ref("");
        //在组件内部使用需要访问当前路由信息，通过const router = useRouter();获取路由实例，然后调用router.push()方法进行跳转
        const router = useRouter();
        const itemList = reactive([
            { path: '/denglu', title: '晨岛' },
            { path: '/yunye', title: '云野' },
            { path: '/denglu', title: '雨林' },
            { path: '/denglu', title: '霞谷' },
            { path: '/denglu', title: '墓土' },
            { path: '/denglu', title: '禁阁' },
            { path: '/denglu', title: '暴风眼' },
        ]);
       
        const toIndex = computed(() => {
            return '/' + router.path.split('/')[1];
        });
        const handleSelect = (path) => {
            router.push({ path: path });
        };
        return {
            message,
            itemList,
            toIndex,
            handleSelect,
        };
    },
 }

/*
export default {
  name: "zuyechajian",
  data() {
    return {
      message: "",
      itemList: [    // 水平一级菜单栏的菜单
        { path: '/zuce', title: '晨岛' },
        { path: '/yunye', title: '云野' },
        { path: '/denglu', title: '雨林' },
        { path: '/zuce', title: '霞谷' },
        { path: '/zuce', title: '墓土' },
        { path: '/zuce', title: '禁阁' },
        { path: '/zuce', title: '暴风眼' },

      ],
    };
  },
  computed: {
    toIndex(){  // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
      return '/' + this.$route.path.split('/')[1];
    },
  },
  methods: {
    handleSelect(path){  // 切换菜单栏
      this.$router.push({
        path: path
      });
    },
  },

}*/
</script>

<style scoped>

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #6dd3f2;
}
 
/* 导航链接 */
.a {
  float: left;/*浮动*/
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 70px;/*文字和边框的距离 */
  text-decoration: none;
  font-size: 17px;
  font-family:"华文琥珀" ;
}
 
/* 链接 - 修改颜色 */
.a:hover {
  background-color: #ddd;
  color: black;
}
.b{
    margin-left: 10px;
    float: left;
}
</style>